<template>
	<div id="Role">
		<table>
			<tr>
				<td colspan="4" style="text-align: left;">
					<el-button type="success" @click="showAddNew=true">新增角色
					</el-button>
				</td>
			</tr>
			<tr>
				<td>角色名称</td>
				<td>角色描述</td>
				<td>详情</td>
				<td>操作</td>
			</tr>
			<tr v-for="(item,key) in allRoles" :key="key">
				<td>{{item.roleName}}</td>
				<td>{{item.roleDesc}}</td>
				<td></td>
				<td>
					<el-button type="primary" size="mini" @click="showEditor=true">
						编辑角色
					</el-button>
					<el-button type="danger" size="mini">
						删除角色
					</el-button>
				</td>
			</tr>
		</table>
		<add-new-role :showAddNew="showAddNew" />
		<editor-role :showEditor="showEditor" />
	</div>
</template>

<script>
	import AddNewRole from './AddNewRole'
	import EditorRole from './EditorRole'
	export default {
		components: {
			AddNewRole,
			EditorRole
		},
		data() {
			return {
				activeName: '2',
				showAddNew: false,
				showEditor: false
			}
		},
		computed: {
			allRoles() {
				return this.$store.getters.allRoles;
			}
		},
		mounted(){
        this.$store.dispatch('loadAllRole')
    }
	}
</script>

<style lang="scss" scoped>
	#AddNewRole {
		width: 100%;
		height: 100%;
		text-align: left;
	}
	
	#AddNewRole /deep/.el-collapse-item__header {
		padding-left: 10px;
	}
</style>